<template>
    <el-main>
        <h1 style="color: #909399">财务管理</h1>
        <div class="split-sys"></div>
        <div style="margin-top: 50px;margin-left: 20px;">
            <el-row>
                <el-col :span="12">
                    <div style="margin-bottom: 15px;width: 240px">
                        <el-date-picker
                                v-model="selectDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy年MM月dd日">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-button type="info" @click="lookView">查看</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div id="bar" style="width: 600px;height:400px;"></div></el-col>
                <el-col :span="12"><div id="pie" style="width: 600px;height:400px;"></div></el-col>
            </el-row>
        </div>
    </el-main>
</template>

<script>
    define(["vue", "axios","echarts"], function(Vue, axios, echarts) {
        return Vue.component("finance", {
            template: template,
            data: function() {
                return {
                    selectDate:[],
                };
            },
            methods:{
                initBar:function () {
                    var _this = this;
                    var myChart = echarts.init(document.getElementById('bar'));
                    axios.post('finance/getFinanceByTime',{
                        "start":_this.selectDate[0],
                        "end":_this.selectDate[1]
                    }).then(function (response) {
                        console.log(response.data);
                        var list = response.data.data;
                        var income = [];
                        var expend = [];
                        var date = [];
                        for (var i=0;i<list.length;i++){
                            income[i] = list[i].income;
                            expend[i] = list[i].expend;
                            date[i] = list[i].createTime;
                        }
                        var incomes = 0;
                        var expends = 0;
                        for (var i=0;i<income.length;i++){
                            incomes = incomes + income[i];
                            expends = expends + expend[i];
                        }
                        var myChart = echarts.init(document.getElementById('bar'));

                        // 指定图表的配置项和数据
                        var option = {
                            title : {
                                text: '收入与支出',
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['收入','支出']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : date
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'收入',
                                    type:'bar',
                                    data:income,
                                    markLine : {
                                        data : [
                                            {type : 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name:'支出',
                                    type:'bar',
                                    data:expend,
                                    markLine : {
                                        data : [
                                            {type : 'average', name : '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        var pie = echarts.init(document.getElementById('pie'));

                        // 指定图表的配置项和数据
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                x: 'left',
                                data:['男','女']
                            },
                            series: [
                                {
                                    name:'收入支出统计',
                                    type:'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        normal: {
                                            show: false,
                                            position: 'center'
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                fontSize: '30',
                                                fontWeight: 'bold'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    data:[
                                        {value:incomes, name:'收入'},
                                        {value:expends, name:'支出'}
                                    ]
                                }
                            ]
                        };
                        pie.setOption(option);
                    }).catch(function (error) {
                        console.log(error);
                    });


                },
                lookView:function () {
                    this.initBar();
                }
            },
            mounted:function () {
            }
        });
    });
</script>

<style>
    .split-sys{
        height: 3px;
        width: 90%;
        background-color: #909399;
    }
</style>